<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>底部菜单管理</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" type="text/css" href="css/slide.css"/>
    <style>
        #uniocn {
            box-sizing: border-box;
            padding: 15px 100px;
        }
    </style>
</head>

<body>
<div id="uniocn" class="layui-layout layui-layout-admin">
    <div class="finance-title" style="background: #fff;">
        <div class="layui-btn">底部菜单管理</div>
    </div>
    <div class="table">
        <table class="layui-hide" id="demo" lay-filter="demo"></table>
        <script type="text/html" id="barDemo">
            <a class="layui-btn layui-btn-sm" lay-event="detail">选择图片</a>
        </script>
    </div>
    <button class="layui-btn">提交</button>
</div>

<div class="alear_a">
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">幻灯片图片</label>
            <div class="layui-input-block">
                <div class="layui-upload">
                    <button type="button" class="layui-btn" id="test1">上传图片</button>
                    <div class="layui-upload-list">
                        <img class="layui-upload-img" style="width: 120px;" id="demo1">
                        <p id="demoText"></p>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<!--修改名称-->
<script type="text/html" id="inputName">
    <input class="layui-input" type="input" name="name">
</script>

<!--开关-->
<script type="text/html" id="switchTpl">
    <input type="checkbox" name="sex" value="{{d.id}}" lay-skin="switch" lay-filter="sexDemo"
           {{d.id==1? 'checked': ''}}>
</script>

<!--链接-->
<script type="text/html" id="inputLink">
    <input class="layui-input" type="input" name="link">
</script>
</body>

<script src="layui/layui.js"></script>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/vue2.5.16.js"></script>
<script src="js/public.js"></script>
<script src="js/data.js"></script>
<script>
    new Vue({
        el: "#uniocn",
        data: {
            header: data.header,
            side: data.side,
        }
    })

    layui.use(['element', 'layer', 'table', 'form', 'upload'], function () {
        var element = layui.element,
            layer = layui.layer,
            table = layui.table,
            form = layui.form,
            upload = layui.upload;
        table.render({
            elem: '#demo',
            cols: [
                [ //标题栏
                    {
                        field: 'position',
                        title: '默认链接',
                        align: 'center',
                    }, {
                    title: '图片',
                    align: 'center',
                    toolbar: '#barDemo'
                }, {
                    field: 'name',
                    title: '修改名称',
                    align: 'center',
                    templet: '#inputName',
                    unresize: true
                }, {
                    field: 'sex',
                    title: '自定义开关',
                    align: 'center',
                    templet: '#switchTpl',
                    unresize: true
                }, {
                    field: 'link',
                    title: '链接',
                    align: 'center',
                    templet: '#inputLink',
                    unresize: true
                }

                ]
            ],

            data: [{
                "position": "首页",
            }, {
                "position": "生活圈",
            }, {
                "position": "订单",
            }, {
                "position": "入驻",
            }, {
                "position": "我的",
            }]

        });

        //监听工具条
        table.on('tool(demo)', function (obj) {
            var data = obj.data;
            if (obj.event === 'detail') {
                //console.log('ID：' + data.id + ' 的查看操作');
                layer.open({
                    title: '上传图片',
                    type: 1,
                    area: '600px',
                    content: $('.alear_a'),
                    btn: '提交'
                });
            }
        });

        //普通图片上传
        var uploadInst = upload.render({
            elem: '#test1',
            url: '',
            before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
            },

            done: function (res) {
                //如果上传失败
                if (res.code > 0) {
                    return layer.msg('上传失败');
                }
                //上传成功
            },

            error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }

        })

        //监听开关操作
        form.on('switch(sexDemo)', function (obj) {
            console.log(this.value + ' ' + this.name + '：' + obj.elem.checked, obj.othis);
        });

    })
</script>

</html>